<!--
导航
v1.0.0 前后年的数据
-->

<template>
  <div class="sh-nav" :class="{'sh-flex':is_flex}" ref="sh-nav">
    <div class="sh-nav-item"
         @tap.stop="select(key)"
         :data-id="key"
         :class="{active:nav_val == key}"
         v-for="(val,key) in data">
      {{val}}
    </div>
    <div class="sh-nav-bar" v-if="nav_val>-1"></div>
  </div>
</template>
<style lang="scss">
  @import "../../assets/css/utils";

  .sh-nav {
    background: #fff;
    position: relative;
    white-space: nowrap;
    border-bottom: 1px solid #ebebeb;
    &-item {
      display: inline-block;
      padding: pxToRem(30) pxToRem(20);
      text-align: center;
      &.active {
        color: #d1a86a;
      }
    }
    &.sh-flex {
      display: flex;
      .sh-nav-item {
        flex: 1;
      }
    }
    &-bar {
      border-radius: pxToRem(40);
      width: pxToRem(40);
      height: pxToRem(4);
      background: #d1a86a;
      position: absolute;
      bottom: 0;
      transition: all 0.2s;
    }
  }
</style>
<script>
  export default {
    name: 'sh-nav',
    props: {
      value: {

      },
      data: {

      },
      is_flex: Boolean,
    },
    data() {
      return {
        nav_val: -1,
//        dom_items: [],
        dom_bar: null,
        bar_width: 0,
      }
    },
    beforeMount() {

    },
    mounted() {
      this.nav_val = this.value;
      this.init();
    },
    methods: {
      init() {
//        console.log(this.$refs['sh-nav']);
        this.$nextTick(() => {
//          this.dom_items = this.$refs['sh-nav'].querySelectorAll('.sh-nav-item');
          this.dom_bar = this.$refs['sh-nav'].querySelector('.sh-nav-bar');
          let item = this.$refs['sh-nav'].querySelector('.sh-nav-item[data-id=\'' + this.nav_val + '\']');
          this.bar_width = this.dom_bar.offsetWidth;
          let item_width = item.offsetWidth;
          let item_left = item.offsetLeft;
          this.dom_bar.style['left'] = (item_left + item_width / 2 - this.bar_width / 2) + 'px';
        });
      },
      select(key) {
        let leftOrRight = this.leftOrRight(key);
        if (leftOrRight === 0) {
          return;
        }
        this.nav_val = key;
        let item = this.$refs['sh-nav'].querySelector('.sh-nav-item[data-id=\'' + key + '\']');
//        let bar_width = this.dom_bar.offsetWidth;
        let bar_left = this.dom_bar.offsetLeft;
        let item_width = item.offsetWidth;
        let item_left = item.offsetLeft;
        if (leftOrRight === 1) {
          this.dom_bar.style['width'] =
            (item_left + item_width / 2 + this.bar_width / 2) -
            bar_left + 'px';
          setTimeout(() => {
            this.dom_bar.style['width'] = this.bar_width + 'px';
            this.dom_bar.style['left'] = (item_left + item_width / 2 - this.bar_width / 2) + 'px';
          }, 200);
        } else if (leftOrRight === -1) {
          this.dom_bar.style['width'] =
            this.dom_bar.offsetLeft + this.bar_width -
            (item_left + item_width / 2 - this.bar_width / 2) + 'px';
//            this.dom_bar.offsetLeft - this.bar_width - item_left + 'px';
          this.dom_bar.style['left'] = (item_left + item_width / 2 - this.bar_width / 2) + 'px';
          setTimeout(() => {
            this.dom_bar.style['width'] = this.bar_width + 'px';
          }, 200);
        }

      },
      leftOrRight(key) {
        let i = 0;
        let cur_i = 0;
        let old_i = 0;
        for (let k in this.data) {
          if (k == key) {
            cur_i = i;
          }
          if (k == this.nav_val) {
            old_i = i;
          }
          i++;
        }
        if (cur_i > old_i) {
          return 1;
        } else if (cur_i < old_i) {
          return -1;
        } else {
          return 0;
        }
      }
    },
    computed: {},
    watch: {
      value(val){
        this.select(val);
      },
      nav_val(val) {
        this.$emit("input",val);
      }
    },
  };
</script>
